<template>
  <div>
    <table :class="$style.table">
      <thead>
        <tr>
          <td :class="$style.title" colspan="11">批样评语</td>
        </tr>
        <tr>
          <th>类型</th>
          <th>批样评语</th>
          <th>图片</th>
          <th>填写人</th>
          <th>填写时间</th>
        </tr>
      </thead>
      <tbody
        v-if="
          comment &&
          comment.craftReviewRecordVos &&
          comment.craftReviewRecordVos.length
        "
      >
        <tr v-for="(item, index) in comment.craftReviewRecordVos" :key="index">
          <td style="width: 100px">
            {{ reviewStage[item.reviewStage] }}
          </td>
          <td style="width: 400px">
            {{ item.remark }}
          </td>
          <td style="width: 400px; text-align: left; padding: 0 20px">
            <div :class="$style.img_list">
              <div :class="$style.img_list_scroll">
                <img
                  v-for="(img, i) in item.ossList"
                  :key="i"
                  v-view-img
                  :class="$style.comment_img"
                  :src="img.ossUrl"
                  alt=""
                />
              </div>
            </div>
          </td>
          <td style="width: 100px">
            {{ item.creator }}
          </td>
          <td style="width: 100px">
            {{ item.createTime }}
          </td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr>
          <td style="height: 200px" colspan="5">暂无数据</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { reviewType, reviewStage } from '../../types'

export default {
  props: {
    productId: {
      type: Number,
      default: -1
    },
    bizScene: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      reviewType,
      reviewStage,
      comment: {}
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        this.comment = await this.$api.craft.craftRemark({
          productId: this.productId
        })
        console.log(this.comment)
      } catch (e) {
        console.error(e)
      }
    }
  }
}
</script>

<style lang="less" module>
@import './style.less';
.commentTitle {
  width: 50%;
}

// .label {
// width: 1%;
// }
// .value {
// width: 50% / 50;
// }
.value_re {
  width: 42%;
}
.commentItem {
  .commentItemLabel {
    float: left;
  }

  .commentItemValue {
    margin-left: 100px;
    border-left: 1px solid #eee;
  }
}
.comment_img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.img_list {
  overflow: auto;
  max-width: 90%;
  margin: 0 auto;
}
.img_list_scroll {
  width: max-content;
  padding: 10px 0;
}
</style>
